import { $ } from './library/jquery.js';
import cookie from './library/cookie.js';

$(function () {

    // ajax
    let shop = cookie.get('shop');
    if (shop && shop != "[]") {
        $('.shopping-cart').removeClass('hide');
        $('.empty-cart').addClass('hide');
        shop = JSON.parse(shop);
        let idList = shop.map(el => el.id).join();
        $.ajax({
            type: "get",
            url: "../../interface/getItems.php",
            data: {
                idList: idList
            },
            dataType: "json",
            success: function (res) {
                console.log(res);
                let tmp = '';
                res.forEach(elm => {
                    let pic = JSON.parse(elm.picture)
                    // 让ajax请求到的数据结果中遍历后的id与cookie中数据的id 相同
                    // 获得cookie中与数据库中的id相对应的id的数据
                    let current = shop.filter(val => val.id == elm.id);
                    tmp += `
                    <div class="shopping-product">
                    <div class="shopping-checkbox check-box-single">
                        <span class="iconfont icon-check-box hide"></span>
                    </div>
                    <img src="${pic[0].src}"
                        alt="" class="product-img">
                    <a href="./product.html?id=${current[0].id}" class="product-name">${current[0].title}</a>
                    <div class="product-price"><span>${current[0].price}</span>元</div>
                    <div class="product-num">
                        <div>
                            <div class="product-decrease">-</div>
                            <span>${current[0].num}</span>
                            <div class="product-increase">+</div>
                        </div>
                    </div>
                    <div class="product-sum"><span>329</span>元</div>
                    <div class="product-del" data-id= ${elm.id}>
                        <span>×</span>
                    </div>
                </div>`;
                });
                $('.shopping-list').append(tmp).find('.product-del').on('click', function () {
                    let res = shop.filter(el => el.id != $(this).attr('data-id'));
                    cookie.set('shop', JSON.stringify(res), 1);
                    location.reload();
                });
                $('.product-decrease').on('click', decrease);
                $('.product-increase').on('click', increase);
                $('.check-box-single').on('click', totalSel2);
                $('.check-box-single').on('click', total);
                sum();
                totalNum();
            }
        });
    } else {

    }


    // 通用

    if (cookie.get('username')) {
        $('.cart-mine').removeClass('hide');
        $('.cart-login').addClass('hide');
        $('#username').html(cookie.get('username'));
    };
    $('#loginout').on('click', function () {
        cookie.remove('isLogined');
        cookie.remove('username');
        location.reload();
    });
    // 商品box
    $('.section-box').each(function (i) {
        $('.section-box').eq(i).hover(() => {
            $('.intocart').eq(i).css('bottom', 15);
        }, () => {
            $('.intocart').css('bottom', -60);
        })
    });

    //下拉菜单
    let cartUsernameTimer = null;
    $('.cart-username').hover(() => {
        if (cartUsernameTimer) clearTimeout(cartUsernameTimer);
        $('.username-list').stop(true, true);
        $('.username-list').slideDown(200);
    }, () => {
        cartUsernameTimer = setTimeout(() => {
            $('.username-list').slideUp(200);
        }, 200);
    });
    $('.username-list').hover(() => {
        if (cartUsernameTimer) clearTimeout(cartUsernameTimer);

    }, () => {
        cartUsernameTimer = setTimeout(() => {
            $('.username-list').slideUp(200);
        }, 200);
    });

    // 全选

    $('body').on('click', '.check-box-single', function () {
        $(this).children().toggleClass('hide');
        if ($(this).children().hasClass('hide')) {
            $(this).children().addClass('hide');
        } else {
            $(this).children().removeClass('hide');
        }
        let tmp = 0;
        $('.check-box-single').each(i => {
            if ($('.check-box-single').eq(i).children().hasClass('hide')) {
                tmp++;
            } else {
                tmp--;
            }
        });
        if (tmp != $('.check-box-single').length) {
            $('.check-box-whole').children().addClass('hide');
        }
    });

    $('body').on('click', '.check-box-whole', function () {
        $(this).children().toggleClass('hide');
        if ($(this).children().hasClass('hide')) {
            $('.check-box-single>span').addClass('hide').parent().removeClass('exist');
        } else {
            $('.check-box-single>span').removeClass('hide').parent().addClass('exist');
        }
        total();
    });

    // 数量 价格计算

    function decrease() {
        let tmp = $(this).next().html();
        if (tmp == 1) {
            $(this).next().html(1);
        } else {
            $(this).next().html(tmp - 1);
        }
        sum();
        totalNum();
        total();
    }
    function increase() {
        let tmp = $(this).prev().html();
        $(this).prev().html(+tmp + 1);
        sum();
        totalNum();
        total();
    }
    // 商品小计
    function sum() {
        $('.shopping-product').each(i => {
            let productSum = $('.product-price>span').eq(i).html()
                * $('.product-num>div>span').eq(i).html();
            $('.product-sum>span').eq(i).html(productSum);
        });
    }



    // shoppingfooter结算
    function totalNum() {
        let total_num = 0
        $('.shopping-product').each(i => {
            total_num += +$('.product-num>div>span').eq(i).html();
        });
        $('.total-num').html(total_num);
    }

    function totalSel2() {
        if ($(this).hasClass('exist')) {
            $(this).removeClass('exist');
        } else {
            $(this).addClass('exist');
        }
    }

    function total() {
        let total_sel = 0;
        let total_price = 0;
        $('.exist').each(i => {
            total_sel += +$('.exist').eq(i).parent().children('.product-num').children().children('span').html();
            total_price += +$('.exist').eq(i).parent().children('.product-sum').children('span').html();
        });
        $('.total-sel').html(total_sel);
        $('.total-price').html(total_price);
    }
})